<template>
  <div class="container">
    <ul class="controller">
      <li class="controller-item"
          :class="{'item-active':isactive==1}"
          @click="isactive=1">
        核销
      </li>
      <li class="controller-item"
          :class="{'item-active':isactive==2}"
          @click="isactive=2">
        核销单
      </li>
    </ul>
    <div class="content">
      <write-offson v-if="isactive==1"
                    @change_tab="change_tab"></write-offson>
      <write-offsonlist v-if="isactive==2"></write-offsonlist>
    </div>
  </div>
</template>

<script>
import writeOffson from "./writeOffson"
import writeOffsonlist from "./writeOfflist"
export default {
  name: "write-off",
  data () {
    return {
      isactive: 1
    }
  },
  methods: {
    change_tab (tab) {
      console.log(tab)
      this.isactive = tab
    }
  },
  components: {
    //  核销下级的组件
    writeOffson,

    //核销单
    writeOffsonlist
  }
}
</script>

<style lang="less" scoped>
.container {
  background: rgba(204, 204, 204, 0.2999);
  display: flex;
  flex-direction: column;
  height: 100%;
  .controller {
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    display: flex;
    background-color: #fff;
    .controller-item {
      flex: 1;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(68, 68, 68, 1);
    }
    .item-active {
      font-size: 17px;
      font-family: "PingFangSC-Medium";
      font-weight: 500;
      color: rgba(255, 131, 166, 1);
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
  }
}
</style>
